<template>
  <div style="display: flex;justify-content: space-between">
    <div style="width:30rem;margin-right: 15px;">
      <img style="width: 100%;height: 16rem;"
           src="https://psuxus.azureedge.net/Content/retail/assets/scheduled.059e5bed0bd225f4273c226339b00119.2.svg?v=1.0.4719.4"
           class="image">
      <div style="margin-top: 20px">
        {{$t('statement.tugb')}}
      </div>
    </div>
    <div style="width: 1px;border-left: 1px solid #dcdfe6;margin-right: 15px"></div>
    <div style="width: 49rem">
      <span style="display: inline-block;font-weight: bolder">{{$t('statement.rtf')}}</span>
      <el-row style="margin: 5px">
        <el-col :span="4">{{$t('attribute.starting')}}<i /></el-col>
        <el-col :span="20">
          <el-date-picker style="width: 48%"
                          v-model="dataForm[scriptItem.text][scriptItem.dates]"
                          format="MM/dd/yy"
                          :clearable="false"
                          :default-value="new Date()"
                          type="date">
          </el-date-picker>
          {{$t('attribute.at')}}
          <el-time-picker v-model="dataForm[scriptItem.text][scriptItem.times]"
                          :clearable="false"
                          style="width: 17.2rem;"
                          :default-value="new Date()"
                          :picker-options="{
                format:'HH:mm:ss A'
              }">
          </el-time-picker>
        </el-col>
      </el-row>
      <el-row style="margin:20px 5px 5px 5px;">
        <el-col :span="4">{{$t('statement.re')}} <i /></el-col>
        <el-col :span="20">
          <el-input-number size="small"
                           :min="1"
                           :max="10000"
                           style="left: 0;width: 30%;"
                           v-model="dataForm[scriptItem.text][scriptItem.number]"
                           @change="numberChange"
                           controls-position="right"></el-input-number>
          <el-select style="width: 65%;margin-left: 18px"
                     v-model="dataForm[scriptItem.text][scriptItem.dateValue]"
                     @change="dateValueChange">
            <el-option v-for="item in options"
                       :key="item.label"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <span style="display: inline-block;font-weight: bolder">{{$t('statement.tfwr')}}</span> <br>
      <span>{{$t('attribute.every')}} {{dataForm[scriptItem.text][scriptItem.number]}} {{options[dataForm[scriptItem.text][scriptItem.dateValue]].label}}</span>
    </div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      options: [
        { label: 'Month', value: '0' },
        { label: 'Day', value: '1' },
        { label: 'Hour', value: '2' },
        { label: 'Minute', value: '3' },
        { label: 'Second', value: '4' }
      ]
    }
  },
  watch: {
    dataForm: {
      handler: function (val) {
        if (val[this.scriptItem.text][this.scriptItem.dates] === '') {
          val[this.scriptItem.text][this.scriptItem.dates] = new Date()
        }
        if (val[this.scriptItem.text][this.scriptItem.times] === '') {
          val[this.scriptItem.text][this.scriptItem.times] = new Date()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    numberChange (e) {
      let str = 'S I H D M ? *'
      switch (this.dataForm[this.scriptItem.text][this.scriptItem.dateValue]) {
        case '0':
          str = str.replaceAll('M', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
        case '1':
          str = str.replaceAll('D', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
        case '2':
          str = str.replaceAll('H', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
        case '3':
          str = str.replaceAll('I', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
        case '4':
          str = str.replaceAll('S', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
      }
      const reg = /[A-Za-z]/g
      str = str.replace(reg, '*')
      this.dataForm[this.scriptItem.text][this.scriptItem.cornstr] = str
    },
    dateValueChange (e) {
      let str = 'S I H D M ? *'
      switch (e) {
        case '0':
          str = str.replaceAll('M', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
        case '1':
          str = str.replaceAll('D', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
        case '2':
          str = str.replaceAll('H', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
        case '3':
          str = str.replaceAll('I', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
        case '4':
          str = str.replaceAll('S', this.dataForm[this.scriptItem.text][this.scriptItem.number])
          break
      }
      const reg = /[A-Za-z]/g
      str = str.replace(reg, '*')
      this.dataForm[this.scriptItem.text][this.scriptItem.cornstr] = str
    }
  }
}
</script>

<style scoped>
i::before {
  content: " *";
  color: #a4262c;
  padding-right: 12px;
}
</style>
